<template>
	<view>
		<view class="tn-margin-sm">
			<block v-for="(item, index) in list" :key="index">
				<uni-card style="border-radius: 10px;margin-top: 20px;" :title="item.title" :isFull="true" @click="toDetail(item)">
					<view class="uni-body">
						<text class="tn-text-md">观看进度：{{formatProgres(item)>100?100:formatProgres(item)}} %</text>
						<tn-line-progress :percent="formatProgres(item)" activeColor="#01BEFF"></tn-line-progress>
					</view>
				</uni-card>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		courselogDetail
	} from '@/api/training.js'
	export default {
		data() {
			return {
				current: 0,
				query: {
					elCourseId: '',
				},
				total: 0,
				list: [],
			}
		},
		onLoad({
			id
		}) {
			this.query.elCourseId = id;
		},
		onShow() {
			setTimeout(()=>{
				this.load()
			},500)
		},
		methods: {
			formatProgres(item) {
				let time = 0
				if (item.elCourseLog) {
					time = item.elCourseLog.watchTime
				}
				return Math.floor(time / item.duration * 100)
			},
			load() {
				courselogDetail(this.query).then(res => {
					if (res.code === 0) {
						this.list = res.data
					}
				})
			},
			toDetail(item) {
				console.log('item',item);
				let time = 0;
				if(item.elCourseLog){
					time = item.elCourseLog.watchTime
				}
				uni.setStorageSync("Course", {
					elCourseId: this.query.elCourseId,
					elTrainId: item.id,
					watchTime: time
				})
				uni.navigateTo({
					url: '/pages/training/videoPlay/videoPlay?watchTime='+time+'&url=' + item.url
				})
			},
		}
	}
</script>